<template>
	<view class="page">
		<view class="topprice">
			账户可用洁净币 ¥{{wallet.balance || 0}} 冻结金额 ¥{{wallet.freezeBalance || 0}}
		</view>
		<view class="bg"> </view>

		<view class="adress"  >
			<view class=""   >
				<view class="a1">{{serveInfo.receiverName}} {{serveInfo.receiverMobile}}</view>
				<view class="a2">{{serveInfo.receiverDetailAddress}} </view>
			</view>
			 
			<u-icon slot="right" name="arrow-right"></u-icon>

		</view>
		 
		<view class="box" style="position: relative;z-index: inherit;margin-top: 20rpx;" v-if="images.length">
			<view class="img">
				<image :src="item" mode="aspectFill" v-for="(item,i) in images" @click="lookImg(item)" :key="i"></image>
			</view>
		</view>
		 
		<!-- 工程单 -->
		<view class="box" style="position: relative;z-index: inherit;margin-top: 20rpx;">
			 
			<view class="a" @click="errModal">
				<view>服务项目</view> 
				<view>{{serveInfo.categoryName}}</view>
			</view> 
			<view class="a">
				<view>服务日期</view> 
				<view v-if="serveInfo.type==2">{{serveInfo.serviceStartTime}}</view>
				<view v-else>{{serveInfo.serviceStartTime}}~{{serveInfo.serviceEndTime}}</view>
			</view>  
			<view class="a" v-if="serveInfo.type==2">
				<view>数量</view> 
				<view>{{serveInfo.num || "-"}}</view>
			</view> 
			<view class="a" v-if="serveInfo.type==3">
				<view>截止接单时间</view> 
				<view>{{serveInfo.deadlineTime || "-"}}</view>
			</view> 
			<view class="a" v-if="serveInfo.type==3">
				<view>休息天数</view> 
				<view>{{serveInfo.restDays || "-"}}</view>
			</view> 
			<view class="a" v-if="serveInfo.type==1">
				<view>服务时间</view> 
				<view>{{serveInfo.timeCycle || "-"}}</view>
			</view> 
			<view class="a">
				<view>服务地址</view> 
				<view>{{serveInfo.areaAddress || ''}}{{serveInfo.receiverDetailAddress || '-'}}</view>
			</view> 
			<view class="a">
				<view>联系人</view> 
				<view>{{serveInfo.receiverMobile}}</view>
			</view> 
			<view class="a" v-if="serveInfo.type==1">
				<view>是否有宠物</view> 
				<view>{{serveInfo.isPet==1? '是':'否'}}</view>
			</view> 
			<view class="a">
				<view>客户留言</view> 
				<view>{{serveInfo.remark}}</view>
			</view> 
			 
		</view>
			 
		<view class="box">
			<view class="pay-item" v-for="item in payTypelist" :key="item.id" @click="chose(item.id)">
				<check-icon :check="item.id==payChannelCode"></check-icon> 
				<view class="block-box__row">
				  <image :src="item.url" mode="widthFix"></image>
				  <label>{{ item.way }}</label>
				</view>
			</view>
		</view> 
		<!-- 
		 actualTotalMoney    totalTotalMoney
		 discountSystemPriceTotal    discountMerchantPriceTotal  discountStaffPriceTotal
		 -->
		<view class="box">
			 
			<view class="a">
				<view style="font-size: 32rpx;">服务总价</view> 
				
				<text style="font-size: 32rpx;" v-if="orderFrom=='1'">￥{{serveInfo.totalTotalMoney}}</text>
				<text style="font-size: 32rpx;" v-else>￥{{serveInfo.totalMoney}}</text>
			</view> 
			<view class="a">
				<view style="font-weight: 400;">平台优惠券</view> 
				<text  v-if="orderFrom=='1'">{{serveInfo.discountSystemPriceTotal || "-"}}</text>
				<text v-else>{{serveInfo.discountSystemPrice || "-"}}</text>
			</view>  
			<view class="a">
				<view style="font-weight: 400;">商户优惠券</view> 
				<text v-if="orderFrom=='1'">{{serveInfo.discountMerchantPriceTotal || "-"}}</text>
				<text v-else>{{serveInfo.discountMerchantPrice || "-"}}</text>
				
			</view> 
			<view class="a">
				<view style="font-weight: 400;">员工优惠券</view> 
				<text v-if="orderFrom=='1'">{{serveInfo.discountStaffPriceTotal || '-'}}</text>
				<text v-else>{{serveInfo.discountStaffPrice || '-'}}</text>
			</view> 
			<view class="a">
				<view style="font-weight: 400;">交通补贴</view> 
				<text>{{serveInfo.subsidyMoney || '-'}}</text>
			</view> 
			 
			<view class="a">
				<view>总计</view> 
				<text v-if="orderFrom=='1'">￥{{serveInfo.actualTotalMoney}}</text>
				<text v-else>￥{{serveInfo.actualMoney}}</text>
			</view> 
			 
		</view>
		
		<view style="height: 100rpx;"> </view>
		
		<view class="orderfooter">
		  <view class="paytotal">
			<view class="paytotal--num">应付 <text>￥{{ orderFrom=='1'?serveInfo.actualTotalMoney:serveInfo.actualMoney }} </text></view>
			<view class="paytotal--discounts">共优惠：¥{{couponTotal}}</view>
			 
		  </view>
		  <view class="woodsbtn" @click="handleSubmit">
			立即支付
		  </view>
		</view>
		
	</view>
</template>

<script>
	import {mapMutations,mapState } from "vuex";
	import  checkIcon from "@/components/checkIcon.vue"
	import {goodsDetailsAPI} from "@/api/appointment.js"
	import {addressdefaultlistAPI,getwalletAPI} from "@/api/user.js"
	import {updatePayOrderAPI,orderdetailAPI,getdetailcleaningAPI,payCleaningAPI,payoneCleaningAPI} from "@/api/order.js"
	import {pay} from "@/utils/pay.js"
	export default {
		components: {
			checkIcon
		},
		data() {
			return {
				// wallet 洁净币 wx_lite 微信小程序支付
				payTypelist:[
				  {
					id: 'wallet',
					url: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/26f10e4328373bc863e8fc9ebc74bd2e0de6fca026121dde8ab8a95ff48cba40.png',
					way: '洁净币支付',
				  },
				  {
					id: 'wx_lite',
					url: 'https://jiejinda.oss-cn-beijing.aliyuncs.com/1db5c1eaa0fa0a7fe6ad998315eaca0f56401d2a24cea18da2fa8b446d466db9.png',
					way: '微信支付',
				  },
				],
				payChannelCode:"wx_lite",
				toolUsageList:[
					{ name: '服务人员自带' },{ name: '客户自备' },
				],
				
				images: [],
				wallet:{//钱包
					
				},
				
				serveInfo:{ //服务对象
					categoryName:"",
					serviceStartTime:"",
					serviceNum:"",
					  
				},
				money:0, 
				orderStaffDO:[],
				orderType:"",//1 保洁单 2 工程单 3 陪护单
				orderFrom:"",
				fromId:"",
				couponTotal:'0',
				orderList:""
			}
		},
		computed:{
		    ...mapState("common", ["adressinfo"]),
			 
		},
		 
		onLoad(option) {
			if(option.id){
				
				if(option.orderFrom==1){
					this.orderFrom=option.orderFrom
					this.fromId=option.id
					this.getorderFrominfo()
				}else{
					if(option.orderList){
						this.orderList=option.orderList
					}
					this.id=option.id
					this.getinit() 
				}
				
			}
			 
		},
		methods: {
			getcouponprice(){
				var total=0
				var coupon=this.serveInfo
				if(coupon.discountSystemPrice){
					total+=this.orderFrom=="1"?coupon.discountSystemPriceTotal:coupon.discountSystemPrice
				}
				if(coupon.discountMerchantPrice){
					total+=this.orderFrom=="1"?coupon.discountMerchantPriceTotal:coupon.discountMerchantPrice
				}
				if(coupon.discountStaffPrice){
					total+=this.orderFrom=="1"?coupon.discountStaffPriceTotal:coupon.discountStaffPrice
				}
				this.couponTotal=total
 			},
			getorderFrominfo(){
				getdetailcleaningAPI({merchantOrderId:this.fromId}).then(res=>{
					this.serveInfo=res
					this.orderStaffDOS=res.orderStaffDOS
					this.images=res.images?res.images.split(",") :[]
					this.serviceTime=res.serviceStartTime
					// this.payChannelCode=res.payChannelCode?res.payChannelCode
					this.getcouponprice()
				})
				// 查余额
				getwalletAPI().then(res=>{
					this.wallet=res
				})
			},
			chose(id){
				this.payChannelCode=id
			},
			handleSubmit(){
				 
				uni.showLoading({
					title:"提交订单中..."
				})
				/*
					1.先判断订单类型，为保洁类的：orderFrom==1 使用payCleaningAPI
					2.如果没有传orderFrom或者orderFrom==2，并且orderList==1
				
				*/ 
				let action=this.orderFrom=="1"?payCleaningAPI:this.orderList==1?payoneCleaningAPI:updatePayOrderAPI
				var data=this.orderFrom=="1"?{
					merchantOrderId:this.fromId
				}:{
					id:this.id
				}
				console.log(action)
				
				action({
					...data,
					payChannelCode:this.payChannelCode
				}).then(res=>{
					pay({
						id:res.payOrderId,
						channelCode:this.payChannelCode,
						channelExtras:{
							openid:uni.getStorageSync("openid")
						}
					},this.payChannelCode).then(result=>{
						console.log(result)
						uni.showToast({
							title:'支付成功'
						})
						setTimeout(()=>{
							uni.redirectTo({
								url:'/pages/order/orderlist'
							})
						},1000)
					}).catch(e=>{
						if(e.code=='1007002004'){
							this.errModal()
						}else{
							uni.showToast({
								title: e.msg,
								duration: 2000,
								icon:'none'
							});
						}
						
					}).finally(()=>{
						uni.hideLoading()
					})
						
					 
				})
			},
			errModal(){
				var _this=this
				uni.showModal({
					title:"账户余额不足",
					content:"当前账户余额不足，请先充值后支付 或更换支付方式",
					cancelText:"微信支付" ,
					confirmText:"去充值",
					confirmColor:"#277EEF",
					cancelColor:"#277EEF",
					success(res){
						if (res.confirm) {
							uni.redirectTo({
								url:'/pages/my/integral/recharge'
							})
						} else if (res.cancel) {
							_this.payChannelCode='wx_lite'
							_this.handleSubmit()
						}
					},
					fail(){
						console.log(2)
					}
				})	
			},
			lookImg(val){
				const urls = this.images
				const current = val
				uni.previewImage({
					urls,
					current
				})
			},
			 
			getinit(){
				// 详情
				orderdetailAPI({id:this.id}).then(res=>{
					this.serveInfo=res
					this.orderStaffDOS=res.orderStaffDOS
					this.images=res.images?res.images.split(",") :[]
					this.serviceTime=res.serviceStartTime
					this.payChannelCode=res.payChannelCode?res.payChannelCode:'wx_lite'
					this.getcouponprice()
					console.log(this.images,"this.imagesthis.images")
				})
				// 查余额
				getwalletAPI().then(res=>{
					this.wallet=res
				})
				
			},
			 
		}
	}
</script>

<style scoped lang="scss">
.page {
	padding: 0 20rpx 120rpx;
	background-color: #F8F8F8;
	min-height: 100vh;
}

.bg {
	width: 100%;
	height: 300rpx;
	background: #277EEF;
	border-radius: 0rpx 0rpx 140rpx 140rpx;
	position: absolute;
	top: 100rpx;
	left: 0;
}
.tip{
	font-weight: 400;
	font-size: 24rpx;
	color: #999999;
	line-height: 38rpx;
	padding: 20rpx 10rpx;
}
.topprice {

	width: 100%;
	font-weight: 500;
	font-size: 28rpx;
	color: #277EEF;
	line-height: 100rpx;
	text-align: center;
}

.adress {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;
	margin-top: 30rpx;

	.a1 {
		font-weight: bold;
		font-size: 28rpx;
		color: #333333;
		line-height: 53rpx;
	}

	.a2 {
		font-size: 24rpx;
		color: #999999;
		line-height: 48rpx;
	}
}

.form {
	position: relative;
	margin-top: 20rpx;
	background-color: #FFFFFF;
	border-radius: 10rpx;
	padding: 20rpx;

	.inp {
		width: 100%;
		display: flex;
		 
		justify-content: flex-end;
	}
}
 
.box{
	padding:20rpx;
	border-radius: 15rpx;
	background-color: #fff;
	margin-bottom: 30rpx;
	 
	.a{
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin:18rpx 0;
		view{
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
		}
		:first-child {
		   width: 100px;
		   // background-color: #277EEF;
		}
		text{
			color: #333333;
			font-weight: 600;
			font-size: 28rpx;
		}
	}
	.img{
		display: flex;
		align-items: center;
		
		image{
			
			width: 160rpx;
			height: 160rpx; 
			margin-right: 30rpx;
			
			border-radius: 10rpx;
		}
	}
	  
.pay-item {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: 6rpx;
  .block-box__row {
	  display: flex;
	justify-content: flex-start;
	align-items: center;
	width: 606rpx;
	padding: 26rpx 0;
	margin-left: 28rpx;
	 
	image {
	  width: 48rpx;
	  height: 48rpx;
	}
	label {
	  margin-left: 12rpx;
	  font-size: 28rpx;
	  font-weight: bold;
	  color: #333333;
	}
  }
}
 
}
 

.orderfooter {
    position: fixed;
    bottom: 0;
    left: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 20rpx 30rpx;
    background-color: #fff;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
	.paytotal{
		flex: 1;
		&--num{
			font-size: 24rpx;
			color: #333333;
			text{
				font-weight: bold;
				font-size: 40rpx;
				color: $uni-color-primary;
			}
		}
		&--discounts{
			font-size: 24rpx;
			color: $uni-color-primary;
		}
	}
    
    .woodsbtn{
		
	}
     
  }	
</style>